<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="a">
  <h3>{{text}}</h3>
  <input type="text" v-model="text"><br>
  懒加载<input type="text" v-model.lazy="text"><br>
  <h3>{{nums}}</h3>
  数值输入<input type="text" v-model.munber="nums"><br>
  <pre>{{text}}</pre>
  去尾空格:<input type="text" v-model.trim="text"><br>

  <h3>{{edu}}</h3>
  <select v-model="edu">
    <option value="1">高中</option>
    <option value="2">大专</option>
    <option>本科</option>
  </select>

  <h3>单选框 {{week}}</h3>
  <input type="radio" value="1" v-model="week">星期一
  <input type="radio" value="2" v-model="week">星期二
  <input type="radio"  v-model="week">星期三

  <h3>多选框 {{likes}}</h3>
  <input type="checkbox" value="1" v-model="likes">篮球
  <input type="checkbox" value="电影" v-model="likes">电影
  <input type="checkbox"v-model="likes">看书

  <pre>多行文本框 {{rows}}</pre>
  <textarea v-model="rows"></textarea>
</div>

<script>
    var v = new Vue({
        el: '#a',
        data: {
          text : "",
          nums : 0,
          edu : "",
          week : "",
          likes :[],
          rows :""
        }
    })
</script>
</body>
</html>